<template>
    <div class="user-login-container">
        <div class="user-login-bd">
            <img class="company-info-logo" src="@/assets/logo.png" />
            <p class="company-info-desc">程序猿交流博客后台管理</p>
            <div class="login-form-container">
                <el-form
                    :model="form"
                    status-icon
                    :rules="rules"
                    :ref="formRef"
                >
                    <el-form-item prop="account">
                        <el-input
                            prefix-icon="el-icon-user"
                            placeholder="请输入用户名"
                            v-model="form.account"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            type="password"
                            prefix-icon="el-icon-lock"
                            placeholder="请输入密码"
                            v-model="form.password"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item prop="captcha">
                        <div class="form-captcha">
                            <el-input
                                placeholder="请输入验证码"
                                v-model="form.captcha"
                                clearable
                            />
                            <div
                                class="img"
                                v-html="svgData"
                                @click="getCaptcha()"
                            ></div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            style="width: 100%"
                            @click="submitForm()"
                            >登录</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { login as Api } from "@/global/request/api";

export default {
    data() {
        return {
            loading: false,

            // 验证码图片
            svgData: "",

            // 表单
            formRef: "formRef", // ref

            form: {
                account: "",
                password: "",
                captcha: "",
            },

            rules: {
                account: [
                    {
                        required: true,
                        message: "用户名不能为空",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 16,
                        message: "长度2到16个字符",
                        trigger: "change",
                    },
                ],
                captcha: [
                    {
                        required: true,
                        message: "验证码不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 4,
                        max: 4,
                        message: "长度4个字符",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    created() {
        this.getCaptcha();
    },
    mounted() {
        // 监听快捷键
        document.addEventListener("keydown", this.handleEvent);
    },
    methods: {
        /* 监听快捷键 */
        handleEvent(e) {
            if (e.keyCode == 13) {
                // 登录
                this.submitForm();
            }
        },

        /* 更新验证码 */
        async getCaptcha() {
            const { code, svgData } = await this.$axios.get(Api.captcha);

            if (code === 200) this.svgData = svgData;
        },

        /* 登录按钮 */
        async submitForm() {
            //表单验证
            this.$refs[this.formRef].validate((valid) => {
                if (valid) {
                    this.loading = true;
                }
            });

            if (this.loading) {
                const { code, data, msg } = await this.$axios.post(
                    Api.userLogin,
                    {
                        user_account: this.form.account,
                        user_password: this.form.password,
                        captcha: this.form.captcha,
                    }
                );

                if (code === 200) {
                    this.$storage.set("token", data.token);
                    // this.$storage.set("userInfo", data.userInfo);
                    this.$msg.success(msg);

                    // 销毁快捷键监听
                    document.removeEventListener("keydown", this.handleEvent);

                    this.loading = false;

                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    this.$msg.error(msg);

                    this.loading = false;
                }
            }
        },
    },
};
</script>

<style lang="less">
.user-login-container {
    display: flex;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .user-login-bd {
        /**logo图片 */
        .company-info-logo {
            height: 80px;
            display: block;
            margin: 0 auto;
        }
        /**desc描述 */
        .company-info-desc {
            margin: 12px 0 40px;
            font-size: 14px;
            opacity: 0.5;
            text-align: center;
        }

        /**表单容器  */
        .login-form-container {
            // max-width: 350px;
            width: 350px;
            margin: 40px auto;

            .form-captcha {
                display: flex;
                align-items: center;

                .img {
                    width: 130px;
                    height: 40px;
                    margin-left: 20px;
                }
            }
        }
    }
}
</style>